<template>
  <div id="screen-wrap">
    <div class="screen-content">
      <div class="header-text">XX风力发电仿真平台</div>
      <MenuList ref="MenuListRef" />
      <div class="viewport">
        <div class="column">
          <div class="cell one">
            <OneCell @changeBtn="v => MenuListRef.changeMode(v)" />
          </div>
          <div class="cell two">
            <TwoCell />
          </div>
          <div class="cell">
            <ThreeCell />
          </div>
        </div>
        <div class="column">
          <div class="cell map">
            <MapView @changeBtn="v => MenuListRef.changeMode(v)" />
          </div>
          <div class="cell bar">
            <BottomCenter />
          </div>
        </div>
        <div class="column">
          <div class="cell">
            <FourCell />
          </div>
          <div class="cell">
            <PanelLayout>
              <SelectLineChart v-model="defaultForm" />
            </PanelLayout>
          </div>
          <div class="cell five">
            <div class="small-box left">
              <FiveCell />
            </div>
            <div class="small-box">
              <SixCell />
            </div>
          </div>
          <div class="cell">
            <SevenCell />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import autofit from 'autofit.js'
// import PHeader from '@/components/PHeader.vue'
// import CollapseLayout from '@/components/CollapseLayout.vue'
// import LeftCol from './LeftCol'
// import RightCol from './RightCol'
import BottomCenter from './BottomCenter'
import { emitter } from '@/utils/EventBus.js'
import MapView from './MapView'
import PanelLayout from './PanelLayout.vue'
import OneCell from '@/views/index/LeftCol/OneCell.vue'
import TwoCell from '@/views/index/LeftCol/TwoCell.vue'
import ThreeCell from '@/views/index/LeftCol/ThreeCell.vue'
import FourCell from '@/views/index/RightCol/FourCell.vue'
import SelectLineChart from '@/components/SelectLineChart.vue'
import FiveCell from '@/views/index/RightCol/FiveCell.vue'
import SixCell from '@/views/index/RightCol/SixCell.vue'
import SevenCell from '@/views/index/RightCol/SevenCell.vue'
import MenuList from '@/views/index/MenuList.vue'

const route = useRoute()

const isCollapse = ref(false)

const defaultForm = ref(['79'])
const MenuListRef = ref(null)

onMounted(() => {
  autofit.init(
    {
      ignore: ['.map-box'],
      dw: 1920,
      dh: 1080,
      el: '#screen-wrap',
      resize: true
    },
    false
  )
  nextTick(() => {
    // console.log(bus)
    emitter.emit('resetChart')
  })
})
</script>

<style lang="scss" scoped>
#screen-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
.screen-content {
  width: 1920px;
  height: 1080px;
  color: #fff;
  position: relative;
  background-color: #101129;
  .header-text {
    position: absolute;
    left: 50%;
    top: 45px;
    transform: translate3d(-50%, 0, 0);
    font-size: 34px;
    font-weight: bold;
    color: #eff6ff;
    background: linear-gradient(0deg, #55c5ff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .top-shadow {
    display: block;
    width: 100%;
    height: 12%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      180deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 1) 60%,
      RGBA(6, 39, 75, 0) 100%
    );
    pointer-events: none;
    opacity: 0.8;
  }
  .bottom-shadow {
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(
      0deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 0) 100%
    );
    pointer-events: none;
    opacity: 0.8;
  }
  .left-shadow {
    display: block;
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      90deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 1) 70%,
      RGBA(6, 39, 75, 0) 100%
    );
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    opacity: 0.8;
    &.isCollapse {
      transform: translateX(-70%);
    }
  }
  .right-shadow {
    display: block;
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(
      -90deg,
      RGBA(6, 39, 75, 1) 0%,
      RGBA(6, 39, 75, 1) 70%,
      RGBA(6, 39, 75, 0) 100%
    );
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    opacity: 0.8;
    &.isCollapse {
      transform: translateX(70%);
    }
  }
}
.viewport {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 77px 18px 18px;
  background: url('@/assets/images/logo.png') no-repeat 0 0 / contain;

  .column {
    flex: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    .cell {
      flex: 1;
      width: 100%;
      box-sizing: border-box;
      &.bar {
        flex: initial;
        height: 306px;
      }
      &.one {
        flex: initial;
        height: 98px;
      }
      &.two {
        flex: initial;
        height: 545px;
      }
      .select-line-chart {
        padding: 0;
      }
      &.five {
        display: flex;
        gap: 18px;
        .small-box {
          flex: 1;
          &.left {
            flex: 2;
          }
        }
      }
    }
    &:nth-child(2) {
      flex: 6;
      margin: 28px 18px 0;
    }
  }
}
</style>
